<template>
    <ContentWrap>
        <el-form ref="queryFormRef" :inline="true" class="-mb-15px" label-width="68px"
            style="display: flex; justify-content: space-between; margin-bottom: 10px;">
            <div>
                <el-form-item label="商品名称" prop="name">
                    <el-input class="!w-240px" clearable placeholder="请输入" />
                </el-form-item>
                <el-form-item label="品牌" prop="name">
                    <el-input class="!w-240px" clearable placeholder="请输入" />
                </el-form-item>
            </div>
            <el-form-item>
                <el-button plain type="primary" @click="dialogFormVisible = true">
                    <Icon class="mr-5px" icon="ep:plus" />
                    年度采集
                </el-button>
                <el-button plain style="color: rgba(80, 122, 255, 1);  border: 1px solid rgba(81, 123, 255, 1);">
                    批量下架
                </el-button>
                <el-button type="primary" plain v-hasPermi="['cms:art-category:export']">
                    导出报告
                </el-button>
                <el-button v-hasPermi="['bpm:form:create']" plain type="primary">
                    <Icon class="mr-5px" icon="ep:plus" />
                    新增
                </el-button>
            </el-form-item>
        </el-form>
        <div class="pro-main">
            <div class="pro-title" v-for="(v, i) in list " :key='i'>
                <div class="main-left">
                    <img src="../../../assets/imgs/avatar.jpg" alt="">
                </div>
                <div class="main-right">
                    <p>品名：{{ v.name }}</p>
                    <p>品牌：{{ v.brand }}</p>
                    <p>集采数量：{{ v.number }}吨</p>
                    <p>库存：{{ v.inventory }}吨</p>
                    <p>价格:{{ v.price }}元/吨</p>
                    <el-progress :percentage="50" />
                </div>
            </div>

        </div>
        <div style="display: flex; justify-content: center;">
            <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :disabled="disabled" background
                layout=" prev, pager, next" :total="1000" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </div>
    </ContentWrap>

    <!-- 弹窗的第一层 -->
    <el-dialog v-model="dialogFormVisible" title="年度采集" style="width: 500px; border-radius: 18px;">
        <div class="main-p" style="font-size: 17px; font-weight: 600;margin-bottom: 10px;">基本信息</div>
        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm"
            :size="formSize" status-icon style=" background-color: #f9fbff; padding: 5px 0px;  border-radius: 15px;">
            <el-form-item label="集采商品" prop="name" style="width: 420px; margin-top: 18px;">
                <el-input v-model="ruleForm.name" placeholder="请输入集采商品" />
            </el-form-item>
            <el-form-item label="集采规格" prop="speci" style="width: 420px;">
                <el-input v-model="ruleForm.speci" placeholder="请输入集采规格" />
            </el-form-item>
            <el-form-item label="集采数量" prop="number" type="number" style="width: 420px;">
                <el-input v-model="ruleForm.number" placeholder="请输入集采数量" />
            </el-form-item>
            <el-form-item label="集采时间" prop="timer" style="width: 420px;">
                <el-input v-model="ruleForm.timer" placeholder="请输入集采时间" />
            </el-form-item>
            <el-form-item label="备注" prop="notes" style="width: 420px;">
                <el-input v-model="ruleForm.notes" placeholder="请输入备注" />
            </el-form-item>
        </el-form>
        <div class="main-p" style="font-size: 17px; font-weight: 600;margin-bottom: 10px;">上传采集协议</div>
        <el-upload class="upload-demo" drag action="http://101.200.84.135:48080/admin-api/infra/file/upload" multiple>
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                <p>点击或将文件拖拽到这里上传</p>
                <p>集采委托协议（国贸-混凝土）第一版（7.26）</p>
            </div>
        </el-upload>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button type="primary" @click="btn">
                    选择供应商
                </el-button>
            </span>
        </template>
    </el-dialog>

    <!-- 第二层弹窗 -->
    <el-dialog v-model="dialogVisible" title="年度采集" style="width: 500px; border-radius: 18px;box-sizing: border-box;">
        <div style="font-size: 17px; font-weight: 600;margin-bottom: 10px;margin: 0px 25px 10px 25px;">共1029家供应商</div>
        <div class="xz">
            <div class="xz-header">
                <input type="checkbox">
                <div>
                    <el-button type="primary" plain size="small">
                        <Icon class="mr-5px" icon="ep:plus" />
                        邀请
                    </el-button>
                    <el-button type="primary" plain size="small">
                        确定
                    </el-button>
                    <el-button type="primary" plain size="small">
                        取消
                    </el-button>
                </div>
            </div>
            <div class="xz-footer">
                <div class="xz-fomain">
                    <div class="footer-le">
                        <div>
                            <input type="checkbox" />
                        </div>
                        <div style="margin-left: 10px;">
                            <p class="first">厦门市政公程有限公司</p>
                            <p class="scoend">联系人：李小四 13400661517</p>
                        </div>
                    </div>
                    <el-tag>良好</el-tag>
                </div>
                <div class="xz-fomain">
                    <div class="footer-le">
                        <div>
                            <input type="checkbox" />
                        </div>
                        <div style="margin-left: 10px;">
                            <p class="first">厦门市政公程有限公司</p>
                            <p class="scoend">联系人：李小四 13400661517</p>
                        </div>
                    </div>
                    <el-tag>良好</el-tag>
                </div>
                <div class="xz-fomain">
                    <div class="footer-le">
                        <div>
                            <input type="checkbox" />
                        </div>
                        <div style="margin-left: 10px;">
                            <p class="first">厦门市政公程有限公司</p>
                            <p class="scoend">联系人：李小四 13400661517</p>
                        </div>
                    </div>
                    <el-tag>良好</el-tag>
                </div>
                <div class="xz-fomain">
                    <div class="footer-le">
                        <div>
                            <input type="checkbox" />
                        </div>
                        <div style="margin-left: 10px;">
                            <p class="first">厦门市政公程有限公司</p>
                            <p class="scoend">联系人：李小四 13400661517</p>
                        </div>
                    </div>
                    <el-tag>良好</el-tag>
                </div>
                <div class="xz-fomain">
                    <div class="footer-le">
                        <div>
                            <input type="checkbox" />
                        </div>
                        <div style="margin-left: 10px;">
                            <p class="first">厦门市政公程有限公司</p>
                            <p class="scoend">联系人：李小四 13400661517</p>
                        </div>
                    </div>
                    <el-tag>良好</el-tag>
                </div>
                <div class="xz-fomain">
                    <div class="footer-le">
                        <div>
                            <input type="checkbox" />
                        </div>
                        <div style="margin-left: 10px;">
                            <p class="first">厦门市政公程有限公司</p>
                            <p class="scoend">联系人：李小四 13400661517</p>
                        </div>
                    </div>
                    <el-tag>良好</el-tag>
                </div>
                <div class="xz-fomain">
                    <div class="footer-le">
                        <div>
                            <input type="checkbox" />
                        </div>
                        <div style="margin-left: 10px;">
                            <p class="first">厦门市政公程有限公司</p>
                            <p class="scoend">联系人：李小四 13400661517</p>
                        </div>
                    </div>
                    <el-tag>良好</el-tag>
                </div>
            </div>
        </div>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" small @click="dialogVisible = false">
                    生成合同
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { UploadFilled } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue';
// import download from '../../../utils/download'
// import * as ContractApi from '../../../api/cms/contract'

// const imgUrl = require("../../../assets/imgs/avatar.jpg")

const list = reactive([
    { name: '425高强度水泥', brand: '纯洗牌', number: '200', inventory: '550', price: '1200' },
    { name: '425高强度水泥', brand: '纯洗牌', number: '200', inventory: '550', price: '1200' },
    { name: '425高强度水泥', brand: '纯洗牌', number: '200', inventory: '550', price: '1200' },
    { name: '425高强度水泥', brand: '纯洗牌', number: '200', inventory: '550', price: '1200' },
    { name: '425高强度水泥', brand: '纯洗牌', number: '200', inventory: '550', price: '1200' },
    { name: '425高强度水泥', brand: '纯洗牌', number: '200', inventory: '550', price: '1200' },

])


// // 上传on-change事件
// const filehandleChange = (file, fileList) => {
//     //1、判断文件大小是否合法，文件限制不能大于50M
//     const isLt5M = file.size / 1024 / 1024 < 50;
//     if (!isLt5M) {
//         ElMessage({
//             type: 'error',
//             message: '上传文件大小不能超过 50MB!',
//         })
//         fileList.splice(-1, 1) //移除当前超出大小的文件
//         return false;
//     }


//     // 2、限制重复上传
//     // 将fileList去重后的长度如果小于目前数组的长度，说明有重复
//     const newListLength = new Set(fileList.map(item => item.name)).size;
//     const listLength = fileList.length;
//     if (listLength > newListLength) {
//         ElMessage({
//             type: 'error',
//             message: '上传文件重复!',
//         })
//         fileList.splice(-1, 1) //移除当前重复的文件即末尾对象
//         return false;
//     }
//     console.log(file)
// }

const dialogVisible = ref(false)
const dialogFormVisible = ref(false)
interface RuleForm {
    speci: string,
    name: string,
    number: string,
    timer: string,
    notes: any
}
const btn = () => {
    dialogFormVisible.value = false

    dialogVisible.value = true
}

const formSize = ref('default')
const ruleFormRef = ref()
const ruleForm = reactive<RuleForm>({
    speci: '',
    name: '',
    number: '',
    timer: "",
    notes: ""
})

const currentPage = ref(5)
const pageSize = ref(100)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
// const message = useMessage()
// 消息弹窗
// const queryParams = reactive({
//     pageNo: 1,
//     pageSize: 10,
//     type: null,
//     sn: null,
//     userId: null,
//     companyId: null,
//     projectId: null,
//     status: null,
//     createTime: [],
//     schedule: null
// })

// const handleExport = async () => {
//     try {
//         // 导出的二次确认
//         await message.exportConfirm()
//         // 发起导出
//         exportLoading.value = true
//         const data = await ContractApi.exportContract(queryParams)
//         download.excel(data, '合同管理.xls')
//     } catch {
//     } finally {
//         exportLoading.value = false
//     }
// }


const rules = reactive({
    name: [
        { required: true, message: '请输入商品名称', trigger: 'blur' }
    ],
    speci: [
        { required: true, message: '请输入商品规格', trigger: 'blur' }
    ],
    number: [
        { required: true, message: '请输入数量', trigger: 'blur' }
    ],
    timer: [
        { required: true, message: '请输入集采时间', trigger: 'blur' }
    ]
})



</script>

<style scoped lang="scss">
.main-p::before {
    content: "●";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    color: rgba(81, 123, 255, 1);
    ;
}

.pro-main {
    display: flex;
    flex-wrap: wrap;

    .pro-title {
        display: flex;
        border-radius: 15px;
        background: rgba(243, 247, 249, 1);
        margin: 10px 0px;
        box-sizing: border-box;
        width: 420px;
        margin-right: 40px;

        .main-left {
            margin: 20px;

            img {
                width: 155px;
            }
        }

        .main-right {
            margin: 20px 20px 20px 0px;

            p {
                margin-bottom: 3px;
                font-size: 16px;
                font-weight: 400;
                letter-spacing: 0px;
                line-height: 23.17px;
                color: rgba(52, 51, 91, 1);
                vertical-align: top;
            }
        }
    }
}

::v-deep.el-pagination.is-background .btn-prev,
::v-deep.el-pagination>.is-last {
    border-radius: 10px;
}

::v-deep.el-pagination.is-background .el-pager li,
.el-pagination.is-background .btn-prev {
    border-radius: 12px;
}

.demo-ruleForm {
    margin-bottom: 10px;
}

.xz-header {
    display: flex;
    margin: 0px 25px 10px 30px;
    justify-content: space-between;
}

.xz-footer {
    box-sizing: border-box;
    height: 500px;
    overflow-y: auto;
}

.xz-fomain {
    width: 400px;
    background-color: #f9faff;
    border-radius: 20px;
    padding: 24px;
    margin: 0 20px 10px 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

}

.footer-le {
    display: flex;

}

.first {
    font-size: 16px;
    font-weight: 500;
}

.scoend {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 20.27px;
    color: rgba(0, 0, 0, 0.4);

}

::-webkit-scrollbar {
    display: none;
    /*隐藏滚动条*/
}
</style>